<template>
  <div class="queue">
    <arrow />
    <div class="list">
      <div class="item" :class="[index === 0 ? 'first':'', index === 1 ? 'two': '', index === 2 ? 'three': '']" v-for="(item, index) in list" :key="index">
        <div class="desc">
          <div class="n">第<span>{{ index + 1 }}</span>位</div>
          <div class="info" v-if="item.user">
            <div class="image">
              <img :src="item.user.avatar" />
            </div>
            <div class="right">
              <div class="name">{{ item.user.nickname }}</div>
              <div class="mobile">{{ item.user.mobile | mobileText }}</div>
            </div>
          </div>
        </div>
        <div class="time">排队时间: {{ item.create_time }}</div>
        <div class="diff" v-if="index === 0">距领取手机, 仅差<span>{{diff}}</span>位</div>
      </div>
    </div>
    <div class="nothing" v-if="list.length === 0">新一轮正在排队中...</div>
    <div class="btn">
      <cube-button @click="$router.push('/product/area/6')">我要排队</cube-button>
    </div>
  </div>
</template>

<script>
import api from '@/api'
import base64 from '@/util/base64'
import Arrow from '@/components/Arrow'
export default {
  components: {
    Arrow
  },
  filters: {
    mobileText(v) {
      return v ? v.substring(0, 3) + '****' + v.substring(7) : ''
    }
  },
  computed: {
    diff() {
      return 10 - this.list.length
    }
  },
  data() {
    return {
      list: []
    }
  },
  methods: {
    getList() {
      api.Uni.queueRepeatList({ id: this.$route.params.id }).then(response => {
        let { data } = response
        data = base64.parse(data)
        console.log(data)
        this.list = data.list
      })
    }
  },
  created() {
    this.getList()
  }
}
</script>

<style scoped lang="stylus">
.queue
  .btn
    position fixed
    bottom 50px
    left 0
    right 0
  .list
    padding-bottom 50px
    .item
      background white
      margin-bottom 10px
      padding 10px 0
      &.first
        background #e35f03
        color white
        .desc
          .n
            span
              font-size 30px
      &.two
        background #f79e5f
        color white
        .desc
          .n
            span
              font-size 26px
      &.three
        background #fdc49c
        color white
        .desc
          .n
            span
              font-size 24px
      .desc
        display flex
        align-items center
        .n
          width 80px
          span
            font-size 20px
            font-weight 700
            margin 0 5px
        .info
          flex 1
          display flex
          align-items center
          .image
            width 80px
            padding 10px
            img
              //width 60px
              //height 60px
              border-radius 50%
          .right
            flex 1
            text-align left
            div
              letter-spacing 1px
              line-height 25px
              overflow hidden
              &.name
                font-size 16px
      .time
        color #666
        height 30px
        line-height 30px
        text-align right
        padding-right 10px
      .diff
        height 40px
        line-height 40px
        font-size 16px
        letter-spacing 2px
        span
          font-size 20px
          margin 0 5px
</style>
